<style scoped>
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }



</style>

<template>
    <div class="company">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加部门</legend>
        </fieldset>

        <form class="layui-form " >


            <div class="layui-form-item">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">所属公司</label>
                <div class="layui-input-inline">
                    <select name="orgguid" lay-verify="required" id="orgguid" lay-filter="orgguid" >
                        <option value="">请选择所属公司</option>

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上级部门</label>
                <div class="layui-input-inline">
                    <select name="upGuid">
                        <option value="">请选择上级部门</option>
                        <option v-for="(item, index) in departments" :value="item.code">{{item.name}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门编码: </label>
                <div class="layui-input-block">
                    <input type="text" name="code" v-model="dcode" @blur="checkCode" lay-verify="required" placeholder="请输入部门编码" class="layui-input">
                </div>

            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">部门类型  </label>
                <div class="layui-input-inline">
                    <select name="type" id="type" lay-verify="required"  lay-search >
                        <option value="">请选择类型</option>
                        <option v-for="(item, index) in dict" :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">负责人</label>
                <div class="layui-input-block">
                    <input type="text" name="manager"  placeholder="请输入负责人" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">负责人电话</label>
                <div class="layui-input-block">
                    <input type="text" name="managertel"  placeholder="请输入负责人电话" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否计划部门</label>
                <div class="layui-input-block">
                    <input type="radio" name="flag" value="1" title="是" >
                    <input type="radio" name="flag" value="0" title="否" checked>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入备注内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="请输入描述内容" class="layui-textarea"></textarea>
                </div>
            </div>



            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: 'AddDepartment',

        data () {
            return {
                houses:[],
                departments:[],
                item:{},
                dict:[],
                currencydict: [],
                dcode: ''
            }
        },
        mounted() {

            this.getTypeEmnu();
            //this.getCurrencyEmnu();
            let that = this;
            this.houses = that.loadOrganization(that);
            layui.use(['form'], function () {


            var form = layui.form,
            layer = layui.layer;
            form.render();
                form.on('submit(submit)', function (fdata) {

                    let loader = layer.load();
                    $.ajax({
                        url: '/sales/Department!add.action',
                        data: fdata.field,
                        type: "post",
                        dataType: "json",
                        success: function(res) {
                            if (res.info == "ok") {
                                that.toastSuccess("添加成功");
                                that.$parent.switchPage('Department');
                            } else if (res.info == 'coderep') {
                                that.toastText('该编码部门已存在');
                            } else {
                                that.toastError("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                    return false;
                });
                form.on('select(orgguid)', function (data) {
                    var message = $("select[name=orgguid]").val();
                    that.loadDepart(message);

                });

            });
        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();

        },
        methods: {
            checkCode: function() {
                if (this.dcode.length > 3) {
                    this.toastText('部门编码必须是3位');
                    this.dcode = '';
                }
            },
            loadOrganization: function (that) {
                $.ajax({
                    url: '/sales/Organization!listAll.action',
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        if (res.info != 'error' ) {
                            $.each(res.info, function (index, item) {
                                $('#orgguid').append(new Option(item.name, item.guid));// 下拉菜单里添加元素
                            });
                            layui.form.render("select");
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {

                    }
                });
            },
            loadDepart(orgguid){
                var that = this;
                $.ajax({
                    url: '/sales/Department!listAll.action',
                    type: "post",
                    dataType: "json",
                    data:{orgguid:orgguid},
                    success: function(res) {
                        if (res.info != 'error' ) {
                            that.departments = res.info;
                            layui.form.render("select");
                        } else {
                            that.toast("获取部门数据失败");
                        }
                    },
                    complete: function () {

                    }
                });
            },check(code) {
                var that = this;
                var result = true;
                $.ajax({
                    url: '/sales/Department!check.action',
                    type: "post",
                    dataType: "json",
                    async:false,
                    data:{code :code1  + code2},
                    success: function(res) {
                        if(res.resultCode != 'success'){
                            result = false;
                            that.toast(res.resultMsg);
                        }

                    },
                    complete: function () {

                    }
                });
                return result;
            } , getTypeEmnu: function() {
                this.$post('/sales/Department!getTypeEmnu.action')
                    .then(response => {
                            this.dict = response.data.info;
                    });
            },
        }
    }
</script>
